<template>
  <div>
    <template v-if="Object.keys(operate).length > 0">
      <el-button v-for="(key, index) in Object.keys(operate)"
                 @click="funcAttrGet(operate, [key, 'clickHandler'])(selection, $event)"
                 size="small" :type="textAttrGet(operate, [key, 'type'])" :key="index"
                 :icon="textAttrGet(operate, [key, 'icon'])">
        {{ textAttrGet(operate, [key, 'label']) }}
      </el-button>
    </template>
    <el-table border ref="normalTable" :data="dataForm[attrName]">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
<!--      需要研究一下 -->
      <template v-for="(key, index) in Object.keys(column)">
        <el-table-column
            align="center"
            :prop="key"
            :key="index"
            :width="numberAttrGet(column, [key, 'width'])"
            :label="textAttrGet(column, [key, 'label'])"
        >
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import basicMixins from './basicMixins'

export default {
  name: 'normalTable',
  mixins: [basicMixins],
  props: {
    column: {
      type: Object,
      default: () => ({})
    },
    operate: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    selection() {
      return this.$refs.normalTable.selection
    }
  },
  methods: {
    numberAttrGet(obj, attrNames) {
      return this.R.path(attrNames, obj)
    },
    textAttrGet(obj, attrNames) {
      return this.R.pathOr('', attrNames, obj)
    },
    funcAttrGet(obj, attrNames) {
      return this.R.pathOr(() => {
      }, attrNames, obj)
    }
  },
  created() {
    this.dataForm[this.attrName] = []
  }
}
</script>

<style scoped>
</style>
